<template>
    <div class="clientseas-item">
      <div class="bg-white">
        <div class="pull-left">
          <div class="content">
          <div class="client-desc">
            <span class="img-wrapper"><img data-object-fit="cover" :src="client.head_img_url" /></span>
            <span class="social-name">{{ client.nick_name | safeNickName }}</span>
            <span class="social-name">{{ client.parent_name }}</span>
            <span class="little-font grey">{{ client.location }}</span>
          </div>
          <div class="property-items">
            <!-- <router-link :to='client.clientLink'>{{ client.sources }}</router-link>
            <router-link :to='client.counselorLink'>{{ client.userType | getUserByType }}</router-link>
            <router-link :to='client.stateLink'>{{ client.state | getStatename }}</router-link> -->

            <div class="property-item">
              {{ client.parent_name | getParentname }}
            </div>
            <div class="property-item">{{ client.custom_property | getUserByType }}</div>
            <div class="property-item">{{ client.custom_status | getStatename }}</div>
          </div>
          <div class="rec-follow grey">最近跟进时间: {{client.last_contact_time | getTime}}</div>
          <!-- <div class="label-list">
            <label v-for="(label, index) in client.labels " :key="index" class="label-item">
              <router-link :to="label.link">{{ label.name }}</router-link>
            </label>
          </div> -->
          </div>
        </div>
        <div class="pull-right">
          <span v-if="loginUser.is_team_manager == 1" class="reassignBtn" @click="assignUser(client.id)">分配</span>
          <span v-if="loginUser.is_team_manager != 1" class="doBtn" @click="obtainClient(client.id)">抢</span>
        </div>
      </div>
    </div>


</template>

<script>
  import store from '../store'

  export default{
    props:{
      client: {
      type : Object,
      require: true
      }
    },
    data () {
      return {

      };
    },
    methods:{
      obtainClient(clientID) {

      let info = {
        taget_suid: '',
        custom_id: clientID,
        distribute_type: 'GH#',
        opt_type: 'GET'
      };

      let that = this;

      store.dispatch('distribute', info).then((response) => {
        if(response.data.errcode === 0) {
        alert('抢客户成功！');
        location.reload()
        // that.$router.back();
        } else {
        console.log(JSON.stringify(response.data));
        }
      }).catch((error) => {
        console.log(error)
      })

      // let response = {errcode:0};
      //
      // if(response.errcode === 0) {
      //   alert('抢客户成功！');
      //   this.$router.back();
      // } else {
      //   alert('系统错误！请联系管理员!');
      //   console.log(JSON.stringify(response));
      // }
      },

      assignUser(clientID) {
      console.log(clientID, 'clientID...')
      this.$emit('on-click', clientID);
      }
    },

    components:{

    },

    computed:{
    loginUser () {
      return this.$store.state.app.user;
    }
    }
  }
</script>

<style lang="less">
  @import '../less/index.less';

  .clientseas-item {
    background-color: white;
    padding: 6px 0 6px 10px;
    border-bottom: 1px solid #e0dcdc;

    &:last-child {
      padding-bottom: 0;
      border-bottom: none;
    }

    .bg-white{
      &:extend(.clearfix all);
      white-space: nowrap;

      .pull-left {
        float: left;
      }

      .pull-right {
        width: 20%;
        text-align: right;
        float: right;

         .reassignBtn,.doBtn {
         display: inline-block;
         margin-top: 30%;
         background-color: #35ADFF;

         float: right;
         text-align: center;
         color: white;
         font-size: 16px;
         border-radius: 2px;

         @reassignBtnSize: 32px;
         height: @reassignBtnSize;
         line-height: @reassignBtnSize;
         }

         .reassignBtn{
         margin-top: 50%;
         margin-right: 10px;
         width: 70px;
         }

         .doBtn{
         border-radius: 50%;
         @doBtnSize:50px;

         width: @doBtnSize;
         height: @doBtnSize;
         line-height: @doBtnSize;
         margin-right: 10px;
         }

      }
    }

    .client-desc {
       display: block;

       &>*{
       vertical-align: middle;
       }


    }

    .img-wrapper {

      width: 3em;
      height: 3em;
      display: inline-block;

      img {
        border-radius: 3em;
        border: 1px solid #eee;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

    }

    a,a:hover,a:visited,a:focus{
      color:#323333;
    }

    .social-name{
      display: inline-block;
      margin-left: 10px;
      font-weight: bolder;
      margin-right: 10px;
    }

    .rec-follow{
      font-size: 13px;
     }

    .property-items {
      margin:2px 0 2px;
    }

    .property-item {
      display: inline-block;
      padding-right: 12px;
      line-height: 15px;
      height: 15px;
      font-size: 14px;
    }

    .property-item:not(:first-child) {
      padding-left: 12px;
    }

    .property-item:not(:last-child) {
      border-right: 1px solid #B2B2B2;
    }

    .label-list{

      &:extend(.clearfix all);

      label{
        float: left;
      }

      a {
        padding: 2px 8px;
        display: block;
        color: white;
        font-size: 12px;
        border-radius: 6px;
        margin-right: 10px;
        background-color: #35ADFF;
      }
    }


    .little-font{
      font-size: 12px;
    }


    .grey{
      color: #6B6B6B;
    }
  }
</style>
